<template>
  <div class="root">
<el-form :model="loginForm" status-icon :rules="rules" ref="resetForm" label-width="0px" class="demo-ruleForm login-container">
  <h2 class="title" style="padding-left:22px;" >用户登录</h2>
  <el-form-item style="width: 100%" prop="name">
    <el-input type="name" v-model="loginForm.name" auto-complete="off" style="width: 100%" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item style="width: 100%" prop="password">
    <el-input type="password" v-model="loginForm.password"  auto-complete="off" style="width: 100%" placeholder="请输入密码"></el-input>
  </el-form-item>

  <el-form-item>
    <el-col :span="12">
      <el-form-item prop="captcha">
        <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码, 单击图片刷新"
                  style="width: 100%;">
        </el-input>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="1">&nbsp;</el-col>
    <el-col :span="11">
      <el-form-item>
        <img style="width: 110px;height: 40px" class="pointer" :src="captchaSrc" @click="refreshCaptcha">
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="login()">提交</el-button>
    <el-button @click="reset('resetForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
  import {Message} from 'element-ui';

  export default {
    data() {
      return {
        serverUrl:"http://127.0.0.1:8082",
        dialogVisible:false,
        server:{
          ip:"http://127.0.0.1",
          port:"8082"
        },
        captchaSrc:"",
        loginForm: {
          name: '',
          password: '',
          captcha:'',
        },
        rules: {

        },
      };
    },
    methods: {
      reset(formName) {
        this.$refs[formName].resetFields();
      },
      login(){
        this.$api.post(this.serverUrl+"/user/login",this.loginForm,response=>{
          let result =  response.data;
          if (response.status == 200){
            if (result.code == 400) {
              Message.error(result.message);
            }else
            Message.success(result.message);
          }else {
            Message.error(result.message);
          }
        })
      },
      refreshCaptcha(){
        this.getCaptcha();
      },
      getCaptcha(){
        this.captchaSrc = this.server.ip+":"+this.server.port + "/captcha/captcha.jpg?t="+ new Date().getTime();
      }
    },
    mounted(){
      this.getCaptcha()
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 150px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: rgba(232,232,232,0.6);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #505458;
    }
  }
</style>
